<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        background-color: #333;
        box-sizing: border-box;
      }

      /* 整个页面作为水波纹容器 */
      .ripple-container {
        position: fixed; /* 设置为固定定位，覆盖整个页面 */
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        pointer-events: none; /* 不干扰页面其他点击事件 */
        overflow: hidden; /* 防止波纹扩散到容器外 */
      }

      /* 水波纹的基本样式 */
      .ripple {
        position: absolute;
        border-radius: 50%;
        background-color: #444;
        transform: scale(0);
        animation: ripple-animation 1s ease-out forwards;
        pointer-events: none; /* 让波纹元素本身不干扰其他操作 */
      }

      /* 波纹扩散的动画效果 */
      @keyframes ripple-animation {
        0% {
          transform: scale(0);
          opacity: 1;
        }

        100% {
          transform: scale(10);
          opacity: 0;
        }
      }
    </style>
  </head>
  <body>
    <div class="ripple-container"></div>
    <script>
      window.addEventListener('load', () => {
        // 页面加载完毕后，模拟点击事件触发波纹
        const container = document.querySelector('.ripple-container');
        const rect = container.getBoundingClientRect();
        const ripple = document.createElement('div');
        const size = Math.max(rect.width, rect.height); // 取容器宽高的最大值
        const x = rect.width / 2 - size / 2; // 设置波纹的位置为容器的中心
        const y = rect.height / 2 - size / 2;

        ripple.classList.add('ripple');
        ripple.style.width = ripple.style.height = `${size}px`; // 设置波纹大小
        ripple.style.left = `${x}px`; // 设置波纹的X坐标
        ripple.style.top = `${y}px`; // 设置波纹的Y坐标

        container.appendChild(ripple);

        // 动画结束后移除波纹元素，避免内存泄漏
        ripple.addEventListener('animationend', () => {
          ripple.remove();
        });
      });
    </script>
  </body>
</html>
